<template>
	<div class="cljk-table">
		<el-table :data="tableData" border style="width: 100%;" :height="tableH+'vh'"
			:header-row-style="{height:'30px'}" :header-cell-style="{
            textAlign: 'center',
            height: '30px',
        }" size="mini">

			<el-table-column prop="plateNo" label="车牌号" width="130" fixed></el-table-column>
			<el-table-column prop="status" label="车辆状态" width="80" fixed>
				<template slot-scope="scope">
					<el-tag type="success" v-if="scope.row.status===1" size="mini">行使</el-tag>
					<el-tag type="warning" v-if="scope.row.status===2" size="mini">停车</el-tag>
					<el-tag type="danger" v-if="scope.row.status===3" size="mini">熄火</el-tag>
					<el-tag type="info" v-if="scope.row.status===4" size="mini">离线</el-tag>
					<el-tag type="info" v-if="scope.row.status===0" size="mini">从未上线</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="gpsTime" label="定位时间" width="150" fixed></el-table-column>
			<el-table-column prop="localStatus" label="定位状态" width="100" fixed></el-table-column>
			<el-table-column prop="terminalId" label="终端标识" width="120"></el-table-column>
			<el-table-column prop="plateColor" label="车牌颜色" width="100"></el-table-column>
			<el-table-column prop="acc" label="ACC状态" width="80"></el-table-column>
			<el-table-column prop="alarmType" label="报警状态" width="100" show-overflow-tooltip></el-table-column>
			<el-table-column prop="mileTotal" label="总里程" width="100">
				<template slot-scope="scope">
					{{scope.row.mileTotal.toFixed(2)+'km'}}
				</template>
			</el-table-column>
			<el-table-column prop="mileToday" label="今日里程" width="100">
				<template slot-scope="scope">
					{{scope.row.mileToday.toFixed(2)+'km'}}
				</template>
			</el-table-column>
			<el-table-column prop="mileZongduan" label="终端总里程" width="100">
				<template slot-scope="scope">
					{{scope.row.mileZongduan+'km'}}
				</template>
			</el-table-column>
			<el-table-column prop="driverName" label="驾驶员" width="100"></el-table-column>
			<el-table-column prop="companyName" label="所属组织" width="200" show-overflow-tooltip></el-table-column>
			<el-table-column prop="runType" label="车辆类型" width="100"></el-table-column>
			<el-table-column prop="signalNum" label="定位信号" width="100">
				<template slot-scope="scope">
					{{parseInt(scope.row.signalNum)>1?'强('+scope.row.signalNum+')':'弱('+scope.row.signalNum+')'}}
				</template>
			</el-table-column>
			<el-table-column prop="satelliteNum" label="通信信号" width="100">
				<template slot-scope="scope">
					{{parseInt(scope.row.satelliteNum)>1?'强('+scope.row.satelliteNum+')':'弱('+scope.row.satelliteNum+')'}}
				</template>
			</el-table-column>
			<el-table-column prop="speed" label="速度" width="100">
				<template slot-scope="scope">
					{{scope.row.speed+'km/h'}}
				</template>
			</el-table-column>
			<el-table-column prop="direction" label="方向" width="100"></el-table-column>
			<el-table-column prop="altitude" label="海拔" width="100"></el-table-column>
			<el-table-column prop="yyWhksList" label="当前位置" width="200" show-overflow-tooltip></el-table-column>
			<el-table-column prop="oil" label="当前油量" width="50">
				<template slot-scope="scope">
					{{scope.row.oil+'L'}}
				</template>
			</el-table-column>

		</el-table>

		<div>
			<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="pageInfo.page" :page-sizes="[20, 50, 100, 200, 300, 400]" :page-size="pageInfo.size"
				layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total"></el-pagination>
		</div>

	</div>
</template>

<script>
	export default {
		name: 'cljkTable',
		props: {
			bottomHeight: {
				type: String,
				default: function() {
					return 22 + 'vh';
				},
				required: true
			},
			sourceTableData: {
				type: Array,
				default: function() {
					return [];
				},
				required: true
			}
		},
		watch: {
			bottomHeight: function(val) {
				if (val === '22vh') {
					this.tableH = 12
				} else {
					this.tableH = 74
				}
			},
			sourceTableData: function(val) {
				this.pageInfo.total = val.length
				this.handleSizeChange(20)
			}
		},
		data() {
			return {
				tableData: [],
				tableH: 12,
				pageInfo: {
					page: 1,
					size: 20,
					total: 0,
				}
			}
		},
		methods: {
			handleSizeChange(val) {
				this.pageInfo.page = 1;
				this.pageInfo.size = val;
				this.tableData = this.currentChangePage(val, this.pageInfo.page);
			},
			/** 切换分页 */
			handleCurrentChange(val) {
				this.pageInfo.page = val;
				this.tableData = this.currentChangePage(this.pageInfo.size, val);
			},
			currentChangePage(size, current) {
				const tablePush = [];
				let array = this.sourceTableData
				array.forEach((item, index) => {
					if (size * (current - 1) <= index && index <= size * current - 1) {
						tablePush.push(item);
					}
				});
				return tablePush;
			},
		}


	}
</script>

<style lang="scss">
	.cljk-table {

		.el-table--mini td,
		.el-table--mini th {
			padding: 0 !important;
		}

		.el-table td,
		.el-table th {
			padding: 0;
		}

		.el-table .cell {
			line-height: 15px;
		}
	}
</style>